<template>
	<view class="containerbox" style="background: linear-gradient(200deg, #c4f2e7, #f5f8e5, #f1f1f1, #f1f1f1);">
		<M-Nav bgColor="transparent"></M-Nav>
		<scroll-view scroll-y="true" class="containerbox px-40" v-if="!loading">
			<view class="word pt-40 flex font-weight-700" style="font-size: 80rpx;">{{itemWord.word}}</view>
			<view class="mt-20 flex items-center">
				<view class="flex items-center text-gray">
					<c_trumpetslot :src="itemWord.pronunciation">
						<text class="text-26">美</text>
						<text class="text-26">{{itemWord.phonetic}}</text>
					</c_trumpetslot>
				</view>
				<view class="flex items-center text-gray ml-40">
					<c_trumpetslot :src="itemWord.pronunciation_br">
						<text class="text-26">英</text>
						<text class="text-26">{{itemWord.phonetic_br}}</text>
					</c_trumpetslot>
				</view>
			</view>
			<view class="tablist">
				<view class="item" :class="{actived: tabIndex === 0}" @click="tabIndex = 0">简明释义</view>
				<view class="item" :class="{actived: tabIndex === 1}" @click="tabIndex = 1">牛津词典</view>
			</view>
			<view v-if="tabIndex === 0" class="pb-50">
				<view v-for="item,index in itemWord.concise" class="flex py-10">
					<view class="text-gray text-26" style="font-style: italic; width: 70rpx;">{{item.property}}</view>
					<view class="flex-1 text-26">{{item.definition}}</view>
				</view>
			</view>
			<view v-if="tabIndex === 1" class="pb-50">
				<view class="flex items-center">	
					<view class="text-24 bgc-gray-20 py-5 mr-10 px-20 round-50" :style="{'color': index === checkedIndex ? '#00c386' : '#666'}" @click="checkedIndex = index" v-for="item,index in itemWord.oxford">{{item.property}}</view>
				</view>
				<template v-for="(item,index) in itemWord.oxford">
					<view v-if="index === checkedIndex">
						<view v-for="bb,index in item.definitions">
							<view class="flex items-center pt-40" v-if="bb.short_trans || bb.short_def">
								<view class="w-5 h-25 bgc-primary mr-10"></view>
								<view class="text-28">{{bb.short_trans}} {{bb.short_def}}</view>
							</view>
							<view v-for="definition,index in bb.definitions" class="pt-20 text-26">
								<view v-if="definition.sensetop_def">
									<view>
										{{ definition.no }}. {{ definition.grammar }} {{ definition.sensetop_def }} {{ definition.sensetop_trans }}
									</view>
									<view class="mt-10 bgc-white round-md px-30 py-20" v-if="definition.define">
										{{ definition.define }}
									</view>
									<view class="mt-10 text-gray" v-if="definition.translation">
										{{ definition.translation }}
									</view>
								</view>
								<view v-else>
									<view v-if="definition.define">
										{{ definition.no }}. {{ definition.grammar }} {{ definition.define }}
									</view>
									<view class="mt-10 text-gray" v-if="definition.translation">
										{{ definition.translation }}
									</view>
								</view>
								<view class="bgc-white round-md px-30 py-20 mt-20" v-if="definition.examples.length>0">
									<view class="text-26 font-weight-700 examtitle">例句</view>
									<template v-for="(example, bb) in definition.examples">
										<view class="flex my-10 text-26" v-if="example.translation">
											<!-- <text class="mr-5">{{bb + 1}}.</text> -->
											<view>
												<view class="mb-5">
													{{ example.example }}
													<c_trumpetslot v-if="example.pron_uk" :src="example.pron_uk" style="height: 38rpx;">
														<text class="text-26">英</text>
													</c_trumpetslot>
													<c_trumpetslot v-if="example.pron_usk" :src="example.pron_usk" style="height: 38rpx;">
														<text class="text-26">美</text>
													</c_trumpetslot>
												</view>
												<view class="text-gray ">
													{{ example.translation }}
												</view>
											</view>
										</view>
									</template>
								</view>
							</view>
						</view>
						<view class="mt-30" v-if="item.idioms.length>0">
							<view class="p-30" style="padding: 15px; border: 1px solid #DCDFE6; border-radius: 10px;">
								<view class="text-30 font-weight-700">习语 Idioms</view>
								<view v-for="(idiom,inx) in item.idioms">
									<view class="text-28 pt-30 mb-20 flex font-weight-700"><view class="round-100 w-15 h-15 mr-10 mt-15" style="background: #000;"></view>{{ idiom.title }}</view>
									<view v-for="(definition,inx2) in idiom.definitions" class="text-26" style="color: #333">
										<view style="font-weight: bold" v-if="definition.sensetop_def">
											<view class="">
												{{ definition.grammar }} {{ definition.sensetop_def }} {{ definition.sensetop_trans }}
											</view>
											<view class=" mt-10">
												{{ definition.define }}
											</view>
											<view class="text-24 text-gray mt-10">
												{{ definition.translation }}
											</view>
										</view>
										<view style="font-weight: bold" v-else>
											<view class="">
												{{ definition.grammar }} {{ definition.define }}
											</view>
											<view class="text-24 text-gray mt-10">
												{{ definition.translation }}
											</view>
										</view>
				
										<view class="mt-20">
											<view class="text-26 font-weight-700">例句</view>
											<view class="mt-10 text-26" style="color: #aca08e;" v-for="example,index in definition.examples">
												<view class="mb-5">
													{{index + 1}}.{{ example.example }}
													<c_trumpetslot v-if="example.pron_uk" :src="example.pron_uk">
														<text class="text-26" style="margin-left: -20rpx;">英</text>
													</c_trumpetslot>
													<c_trumpetslot v-if="example.pron_usk" :src="example.pron_usk">
														<text class="text-26" style="margin-left: -20rpx;">美</text>
													</c_trumpetslot>
												</view>
												<view class="text-gray ">
													{{ example.translation }}
												</view>
											</view>
										</view>
									</view>
								</view>
				
							</view>
						</view>
					</view>
				</template>
			</view>
		</scroll-view>
		<view class="my-auto" v-if="loading">
			<gl_loading :status="loading" background-color="transparent" />
		</view>
	</view>
	
</template>

<script setup>
import { computed, onBeforeUnmount, ref, watch } from 'vue';
import { onLoad, onShareAppMessage } from "@dcloudio/uni-app"
import { selectWord_api } from '@/common/apis/spoken'
import useAudio from '@/common/hooks/useAudio'

import c_trumpetslot from './components/trumpetslot.vue'
import c_wifi from './components/wifi.vue'

const { playAudio, isPlayWord, stopAudio } = useAudio()

const itemWord = ref({})
const checkedIndex = ref(0)
const tabIndex = ref(0)

async function selectWord(word){
	itemWord.value = await selectWord_api({word})
	itemWord.value.oxford && itemWord.value.oxford.forEach((item, index) => {
		let i = 1;
		item.definitions.forEach((item, index) => {
			item.definitions.forEach((item, index) => {
				item.no = i
				i++
			})
		})
	})
	setTimeout(() => {
		loading.value = false
	}, 500)
}

const loading = ref(true)
onLoad((o) => {
	if(o.word){
		console.log(o.word)
		let noSpacesWord = o.word.replace(/\s+/g, '');
		selectWord(noSpacesWord)
	}
})
</script>

<style lang="scss" scoped>
.tablist{
	display: flex; align-items: center; padding: 30rpx 0;
	.item{font-size: 28rpx; margin-right: 40rpx; white-space: nowrap; transition: all 0.3s; position: relative; color: #999;}
	.actived{font-size: 30rpx; font-weight: bold; color: #333;}
	.actived:after{position: absolute; height: 10rpx; border-radius: 50rpx; background-color: #00c386; content: ''; display: block; width: 50rpx; left: 50%; bottom: -10rpx; transform: translateX(-50%);}
}
.examtitle{position: relative;}
.examtitle:after{content: ''; width: 30rpx; height: 30rpx; display: block; border-radius: 100%; background-color: #fc4707; position: absolute; top: 0; left: 0; transform: translate(-8rpx, 0); opacity: .2;}
</style>